<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div class="page-wrapper">
    <form class="layui-form" action="" id="save_menu_form" style="display: none">
        <div class="layui-form-item">
            <input type="hidden" name="parentId" class="parent_id">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-inline">
                <input  type="text" name="parentName"     placeholder="单击选择上级菜单"
                       autocomplete="off"
                       class="layui-input parent_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单类型</label>
            <div class="layui-input-block">
                <input type="radio" name="menuType" lay-filter="menuType-filter" value="M" title="目录" >
                <input type="radio" name="menuType" lay-filter="menuType-filter" value="C" title="菜单" checked="">
                <input type="radio" name="menuType" lay-filter="menuType-filter" value="F" title="按钮" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="menuName" required lay-verify="required" placeholder="请输入菜单名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item menu_url" >
            <label class="layui-form-label">请求地址</label>
            <div class="layui-input-inline">
                <input type="text" name="url"  placeholder="请输入请求地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item menu_perms" >
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-inline">
                <input type="text" name="perms"  placeholder="请输入权限标识" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示排序</label>
            <div class="layui-input-inline">
                <input type="text" name="orderNum" required lay-verify="required" placeholder="请输入显示排序" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="remark" required lay-verify="required" placeholder="请输入备注信息" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSaveMenu">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
<!--    ==========================编辑菜单===================================-->
    <form class="layui-form" action="" id="update_menu_form"  lay-filter="update_menu_form_filter" style="display: none">
        <div class="layui-form-item">
            <input type="hidden" name="parentId" class="parent_id">
            <input type="hidden" name="menuId">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-inline">
                <input  type="text" name="parentName"    placeholder="单击选择上级菜单"
                        autocomplete="off"
                        class="layui-input parent_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单类型</label>
            <div class="layui-input-block">
                <input type="radio" name="menuType" lay-filter="menuType-filter" value="M" title="目录" >
                <input type="radio" name="menuType" lay-filter="menuType-filter" value="C" title="菜单" checked="">
                <input type="radio" name="menuType" lay-filter="menuType-filter" value="F" title="按钮" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="menuName" required lay-verify="required" placeholder="请输入菜单名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item menu_url" >
            <label class="layui-form-label">请求地址</label>
            <div class="layui-input-inline">
                <input type="text" name="url"  placeholder="请输入请求地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item menu_perms">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-inline">
                <input type="text" name="perms"  placeholder="请输入权限标识" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示排序</label>
            <div class="layui-input-inline">
                <input type="text" name="orderNum" required lay-verify="required" placeholder="请输入显示排序" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="remark" required lay-verify="required" placeholder="请输入备注信息" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formUpdateMenu">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <div class="demo-side">
        <table id="menuTreeTb"></table>
    </div>
    <div class="layui-form-item" id="choose_parent_menu" style="display: none">
        <label class="layui-form-label">菜单权限</label>
        <div class="layui-input-inline">
            <div id="menuTreeChoose" class="demo-tree-more"></div>
        </div>
    </div>

</div>

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn  layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--    顶部工具栏-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addMenu">添加菜单</button>
            <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe668;</i>展开全部
            </button>
            <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe66b;</i>折叠全部
            </button>
        </div>
    </script>
<script>
    layui.config({
        base: '/layui/lay/modules/'      //自定义layui组件的目录
    }).extend({ //设定组件别名
        treeTable:   'treeTable',
    });
    layui.use(['layer', 'util', 'treeTable','jquery','form','tree'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let util = layui.util;
        let tree = layui.tree;
        let treeTable = layui.treeTable;
        let index;
        $('body').removeClass('layui-hide');

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#menuTreeTb',
            url: '/menu/findAllMenusTreeTable',
            toolbar: '#toolbarDemo',
            height: '400',
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'menuId',
                pidName: 'parentId'
            },
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {type: 'numbers'},
                    {field: 'menuId', title: '菜单编号', minWidth: 80},
                    {field: 'menuName', title: '菜单名称', minWidth: 140},
                    {field: 'orderNum', title: '排序', minWidth: 30},
                    {field: 'url', title: '请求地址', minWidth: 80},
                    {field: 'menuType', title: '类型', minWidth: 50,
                        templet: function (d) {
                            if (d.menuType == 'M') {
                                return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">目录</button>'
                            } else if(d.menuType == 'C') {
                                return '<button type="button" class="layui-btn  layui-btn-xs">菜单</button>'
                            }else {
                                return '<button type="button" class="layui-btn  layui-btn-warm layui-btn-xs">按钮</button>'
                            }
                        }},
                    /*{field: 'visible', title: '可见', minWidth: 50,hide:true,
                        templet: function (d) {
                            if (d.visible == 0) {
                                return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">显示</button>'
                            } else {
                                return '<button type="button" class="layui-btn  layui-btn-warm layui-btn-xs">隐藏</button>'
                            }
                        }
                    },*/
                    {field: 'perms', title: '权限标识'},
                    {field: 'remark', title: '备注'},
                    {field: 'createTime', title: '创建时间'},
                    {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
                ]
            ],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(menuTreeTb)', function (obj) {
            var event = obj.event;
            if (event === 'del') {

                let menuId=obj.data.menuId;

                if(obj.data.hasOwnProperty('children') && obj.data.children.length>0){
                    layer.alert("含有子菜单，禁止删除!");
                }else
                {
                    //对于删除或者是其他敏感操作，一定要让用户确认。
                    layer.confirm('确定要删除吗？', function () {

                        $.ajax({
                            url: '/menu/deleteMenu',
                            dataType: 'json',
                            type: 'POST',
                            data: {menuId:menuId},//将js对象转成json串传入到后台
                            success: function (result) {
                                layer.closeAll();//关闭对话框
                                layer.msg(result.msg);
                                insTb.reload();
                            }
                        })

                    })
                }

            } else if (event === 'edit') {
                console.log(obj);
                $.ajax({
                    url: '/menu/findAllMenus',
                    dataType: 'json',
                    contentType: "application/json;charset=UTF-8",
                    type: 'GET',
                    success: function (result) {
                        //基本演示
                        tree.render({
                            elem: '#menuTreeChoose'
                            , data: result
                            , onlyIconControl:true
                            ,click: function(treeObj){
                                /*alert(obj.data.id);*/ //得到当前点击的节点数据的id
                                /*alert(obj.data.title);*/ //得到当前点击的节点数据的名字
                                $(".parent_id").val(treeObj.data.id);
                                $(".parent_name").val(treeObj.data.title);
                                layer.close(index);
                            }
                        });
                    }
                });

                layer.open({
                    title: '编辑菜单',
                    type: 1,
                    content: $('#update_menu_form'),
                    area: ['450px', '430px']
                });
                //获取父节点的名称
                $.ajax({
                    url: '/menu/findParentNameId',
                    dataType: 'json',
                    type: 'POST',
                    data: {menuId:obj.data.parentId},
                    success: function (result) {
                        //将修改前的数据赋值给修改表单
                        form.val('update_menu_form_filter', {
                            "parentName":result.data.menuName
                            ,"parentId": obj.data.parentId
                            ,"menuId": obj.data.menuId
                            ,"menuName": obj.data.menuName
                            ,"url": obj.data.url
                            ,"perms": obj.data.perms
                            ,"orderNum": obj.data.orderNum
                            ,"menuType":obj.data.menuType
                            ,"remark": obj.data.remark
                        });
                    }
                })

            }
        });

        // 头部工具栏点击事件
        treeTable.on('toolbar(menuTreeTb)', function (obj) {
            if (obj.event === 'addMenu') {
                $.ajax({
                    url: '/menu/findAllMenus',
                    dataType: 'json',
                    contentType: "application/json;charset=UTF-8",
                    type: 'GET',
                    success: function (result) {
                        //基本演示
                        tree.render({
                            elem: '#menuTreeChoose'
                            , data: result
                            , onlyIconControl:true
                            ,click: function(obj){
                                /*alert(obj.data.id);*/ //得到当前点击的节点数据的id
                                /*alert(obj.data.title);*/ //得到当前点击的节点数据的名字
                                $(".parent_id").val(obj.data.id);
                                $(".parent_name").val(obj.data.title);
                                layer.close(index);
                            }
                        });
                    }
                });
                layer.open({
                    title: '添加菜单',
                    type: 1,
                    content: $('#save_menu_form'),
                    area: ['400px', '480px']
                });
            }
        });
        form.on('radio(menuType-filter)', function(data){
      /*      console.log(data.elem); //得到radio原始DOM对象
            console.log(data.value); //被点击的radio的value值*/
            let menuType=data.value;
            switch (menuType) {
                case 'M':
                    $(".menu_url").css('display','none');
                    $(".menu_perms").css('display','none');
                    break;
                case 'C':
                    $(".menu_url").css('display','block');
                    $(".menu_perms").css('display','block');
                    break;
                case 'F':
                    $(".menu_url").css('display','none');
                    $(".menu_perms").css('display','block');
                    break;
            }
        });
        //添加提交
        form.on('submit(formSaveMenu)',function (data) {
            $.ajax({
                url: '/menu/saveMenu',
                dataType: 'json',
                type: 'POST',
                data: data.field,
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    insTb.reload();
                }
            })
            return false;
        });
        //修改提交
        form.on('submit(formUpdateMenu)',function (data) {
            $.ajax({
                url: '/menu/updateMenu',
                dataType: 'json',
                type: 'POST',
                data: data.field,
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    insTb.reload();
                }
            })
            return false;
        });
        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });
        // 重载
        $('#btnReload').click(function () {
            insTb.reload();
        });
        $('#btnRefresh').click(function () {
            insTb.refresh();
        });

        //点击上级菜单弹出菜单树
       $(".parent_name").click(function () {
           index=layer.open({
               title: '选择上级菜单',
               type: 1,
               content: $('#choose_parent_menu'),
               area: ['400px', '350px']
           });
       })

    });
</script>
</body>
</html>                                    